<template>
  <div>
      <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="(item,index) in imgList" :key="index">
              <router-link :to="{path:'/detail',query:{idfirst:item.id,index:0,title:1}}" tag="div" class="img-box">
                  <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.backgroundRotaryBroadcasting}`" alt="">
              </router-link>
          </el-carousel-item>
      </el-carousel>
      <div class="toBottom" @click="nextSlide"></div>
  </div>
</template>

<script>
    import {getProductList} from "../../../api";

    export default {
        name: "firstShuffling",
        data(){
            return {
                imgList:[]
            }
        },
        created() {
            getProductList ().then(res=>{
                // console.log(res.rows.filter(item=>item.homepagebroadcast==1))
                this.imgList=res.rows.filter(item=>item.homepagebroadcast==1)
            })
        },
        methods:{
            nextSlide(){
                this.$store.state.imgPic.slideNext();
            }
        }
    }
</script>
<style scoped lang="less">
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    /deep/.el-carousel__container{
        position: relative;
        height: 746px;
    }
    .img-box>img{
        width: 100%;
        height: 100%;
    }
    /deep/.el-carousel__arrow{
        position: absolute;
        top: 36% !important;
        font-size: 40px;
    }
    /deep/.el-carousel__arrow--left{
        left: 50px;
    }
    /deep/.el-carousel__arrow--right{
        right: 50px;
    }
    /deep/.el-carousel__indicators--horizontal{
        bottom: 115px;
        li{
            padding: 12px 15px;
        }
        .el-carousel__button{
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }
    }
    .toBottom{
        width: 250px;
        height: 120px;
        background-image: url("../../../assets/images/white.png");
        background-size: 100% 100%;
        position: fixed;
        opacity: 0.4;
        /*bottom: -49px;*/
        bottom: -29px;
        left: 639px;
        z-index: 10000;
    }
    .toBottom:hover{
        background-image: url("../../../assets/images/blue.png");
        background-size: 100% 100%;
    }
</style>


